<template>
    <div class="common-layout">
        <div class="text-center text-2xl font-bold mt-10 text-primary">
            <a class="flex items-center justify-center" :href="homeUrl.get('home')">
                <div class="mr-2">{{ title }} - </div>
                <div class="">{{ pageTitle }}</div>
            </a>
        </div>
        <NuxtPage />
    </div>
</template>
<script setup>
const route = useRoute()
const pageTitle = computed(() => {
    switch (route.path) {
        case '/other/about':
            return 'About Us'
        case '/other/privacy':
            return 'Privacy Policy'
        case '/other/disclaimer':
            return 'Disclaimer'
        case '/other/terms':
            return 'Terms of Service'
        default:
            return 'APKpick'
    }
})
const homeUrl = ref(new Map())
const getPageTitle = () => {
    const { getHomeParams, buildQueryString } = useUrlParams()
    const queryParams = {
        ...getHomeParams(),
    }
    return `/?${buildQueryString(queryParams)}`
}
const hostname = useHostname()
const { name: title } = getThemeConfig(hostname)
onMounted(() => {
    homeUrl.value.set('home', getPageTitle())
})
</script>
<style scoped lang="scss">
.text-primary {
  color: var(--primary-color);
}
</style>
  